import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test01/okhttp_test/pojo/rewrite/new_selecte_text.dart'
    as new_select_text;

/*
*
* "我的"----------意见反馈
*
* */
class FeedbackPage extends StatefulWidget {
  const FeedbackPage({Key key}) : super(key: key);

  @override
  _FeedbackPageState createState() => _FeedbackPageState();
}

class _FeedbackPageState extends State<FeedbackPage>
    with TickerProviderStateMixin {
  ///图片列表
  List<String> pictureLists = [
    "assets/personal_home_icon/shezhi.png",
    "assets/personal_home_icon/bodybuilding_album.png",
    "assets/personal_home_icon/bodybuilding_background.png",
    "assets/personal_home_icon/picture_icon.png",
    "assets/personal_home_icon/picture_icon.png",
    "assets/personal_home_icon/weight_background.png",
    "assets/personal_home_icon/shezhi.png",
    "assets/login_bg.png",
  ];

  ///数组下标
  List<String> animationIndex = [];

  ///动画控制器
  Map<String, AnimationController> _animationControllers = {};

  void onReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) {
      newIndex -= 1;
    }
    String rows = pictureLists[oldIndex];
    pictureLists.removeAt(oldIndex);
    pictureLists.insert(newIndex, rows);
    setState(() {});
  }

  ///图片拖拽列表
  itemsInit() {
    List<Widget> items = [];
    //界面复制
    List.generate(pictureLists.length >= 9 ? 9 : pictureLists.length, (i) {
      items.add(pictureItem(pictureLists[i]));
    });
    return items;
  }

  @override
  void initState() {
    //初始化--动画控制器
    for (int i = 0; i < pictureLists.length; i++) {
      _animationControllers[pictureLists[i]] =
          AnimationController(duration: Duration(seconds: 1), vsync: this);
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      //设置键盘弹起不影响布局
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () {
            ///界面返回
            Navigator.of(context).pop();
            print("返回");
          },
        ),
        backgroundColor: Colors.white,
        elevation: 1,
        title: Text(
          "意见反馈",
          style: TextStyle(fontSize: 18, color: Color.fromRGBO(17, 17, 17, 1)),
        ),
        actions: [
          feedbackSubmission(),
          SizedBox(
            width: 16,
          )
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 16, top: 13),
            child: Text(
              "你的意见和反馈，是对我们最大的支持",
              style:
                  TextStyle(fontSize: 16, color: Color.fromRGBO(17, 17, 17, 1)),
            ),
          ),
          //QQ群
          qqGroup(),
          //意见输入框
          inputOfOpinions(),
          //图片循环显示
          pictureList(),
        ],
      ),
    );
  }

  ///意见反馈提交
  Widget feedbackSubmission(){
    return GestureDetector(
      onTap: () {
        print(
            "----------------------意见反馈提交-----------------------------");
      },
      child: Container(
        padding: EdgeInsets.only(top: 14, bottom: 14),
        child: Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width - 259 - 16,
          decoration: BoxDecoration(
            color: Color.fromRGBO(255, 64, 89, 1),
            borderRadius: BorderRadius.circular(14),
          ),
          child: Text(
            "提交",
            style: TextStyle(
                fontSize: 14, color: Color.fromRGBO(255, 255, 255, 1)),
          ),
        ),
      ),
    );
  }

  ///QQ群
  Widget qqGroup() {
    return Container(
      margin: EdgeInsets.only(left: 16, top: 19.5),
      child: new_select_text.SelectableText(
        '意见反馈QQ群：322292818',
        autofocus: true,
        cursorColor: Colors.red,
        cursorRadius: Radius.circular(10),
        cursorWidth: 9,
        style: TextStyle(fontSize: 14, color: Color.fromRGBO(153, 153, 153, 1)),
      ),
    );
  }

  ///意见输入框
  Widget inputOfOpinions() {
    return Container(
        width: MediaQuery.of(context).size.width - 32,
        height: 148.5,
        margin: EdgeInsets.only(left: 16, right: 16, top: 25.5),
        padding: EdgeInsets.only(left: 16, right: 16),
        decoration: BoxDecoration(
            border:
                Border.all(width: 0.5, color: Color.fromRGBO(204, 204, 204, 1)),
            borderRadius: BorderRadius.circular(2)),
        child: TextField(
          decoration: InputDecoration(
            hintText: '请告诉我们您的宝贵意见，我们会认证对待~',
            hintStyle: TextStyle(
                color: Color.fromRGBO(204, 204, 204, 1), fontSize: 14),
            border: InputBorder.none, // 去掉下滑线
            counterText: '',
          ),
          minLines: 1,
          maxLines: ((MediaQuery.of(context).size.width - 32) / 16).toInt(),
        ));
  }

  ///图片Item
  Widget pictureItem(String index) {
    return SizeTransition(
        key: ValueKey(pictureLists.indexOf(index)),
        sizeFactor: Tween<double>(begin: 1.0, end: 0.0).animate(CurvedAnimation(
          parent: _animationControllers[index],
          curve: Curves.fastOutSlowIn,
        )),
        axis: Axis.horizontal,
        child: Container(
          height: 94,
          width: 94,
          margin: EdgeInsets.only(right: 5),
          child: Stack(
            children: <Widget>[
              Container(
                width: 86,
                height: 86,
                margin: EdgeInsets.only(top: 9),
                child: Image.asset(
                  index,
                  fit: BoxFit.cover,
                ),
              ),
              GestureDetector(
                onTap: () {
                  print("-----------------删除$index-------------------");
                  if (_animationControllers.containsKey(index)) {
                    _animationControllers[index].forward().then((value) {
                      _animationControllers.remove(index);
                      pictureLists.removeWhere((v) => v.indexOf(v) == index);
                    });
                  }
                },
                child: Container(
                  alignment: Alignment.topRight,
                  child: Icon(
                    Icons.add_circle_outline_outlined,
                    size: 18.04,
                  ),
                ),
              ),
            ],
          ),
        ));
  }

  ///添加图片
  Widget addPicrture() {
    return Container(
      height: 94,
      width: 94,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(3),
        color: Color.fromRGBO(243, 243, 243, 1),
      ),
      margin: EdgeInsets.only(right: 5, top: 9),
      child: Icon(
        Icons.add,
        color: Color.fromRGBO(204, 204, 204, 1),
      ),
    );
  }

  ///图片循环显示
  Widget pictureList() {
    return Container(
        height: 94,
        margin: EdgeInsets.only(left: 16, top: 9),
        child: ReorderableListView(
          reverse: true, //是否翻转
          header:pictureLists.length>=9?Container(): addPicrture(),
          scrollDirection: Axis.horizontal,
          children: itemsInit(),
          onReorder: onReorder,
        ));
  }
}
